<example name="Table Ng">
  <file type="html">
    <div ng-app="Example.table" ng-strict-di ng-controller="ExampleCtrl as ctrl">
      <h3>Title of the page</h3>

      <rg-legacy-table-toolbar stick>
        <div>Some toolbar content. Focused: {{ctrl.selection.getFocused().country}}</div>
      </rg-legacy-table-toolbar>

      <rg-table
        data="ctrl.data"
        columns="ctrl.columns"
        selection="ctrl.selection"
        on-select="ctrl.onSelect"
        autofocus="true"
        sticky-header-offset="'56px'"

        sort-key="ctrl.sortKey"
        sort-order="ctrl.sortOrder"
        on-sort="ctrl.onSort"
      ></rg-table>
    </div>
  </file>
  <file type="css">
    body {
      margin: 0;
      padding: 0;
    }
  </file>
  <file type="js">
    import angular from 'angular';
    import RingTable from '@jetbrains/ring-ui/components/table-ng/table-ng';
    import TableLegacyToolbar from '@jetbrains/ring-ui/components/table-legacy-ng/table-legacy-ng__toolbar'
    import Selection from '@jetbrains/ring-ui/components/table/selection';
    import data from '@jetbrains/ring-ui/components/table/table.examples.json';

    const columns = [
      {
        id: 'country',
        title: 'Country'
      },
      {
        id: 'city',
        title: 'City',
        sortable: true
      },
      {
        id: 'url',
        title: 'URL'
      }
    ];

    const exampleModule =  angular.module('Example.table', [RingTable, TableLegacyToolbar]);

    exampleModule.controller('ExampleCtrl', function () {
      this.data = data;
      this.columns = columns;
      this.selection = new Selection({data});
      this.sortKey = 'city';
      this.sortOrder = false;

      this.onSelect = selection => {
        this.selection = selection;
      }

      this.onSort = ({column: {id: key}, order}) => {
        this.sortOrder = order;
        this.data = this.data.slice().sort((itemA, itemB) => {
          return order ? itemA[key].localeCompare(itemB[key]) : itemB[key].localeCompare(itemA[key]);
        });
      };
    });
  </file>
</example>
